<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>条件渲染</title>
</head>

<body>
  <!--
      v-if指令用于有条件地渲染一块内容，指令表达式返回turthy值的时候就渲染
     
      v-if 和 v-show 区别
      1. v-if是真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
      2. v-if是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块
      3. v-show作用的元素始终会保留在DOM中，该指令只是简单的切换元素的display属性
      4. v-show不支持<template>元素，也不支持v-else

      总结：v-if有更高的切换开销，而v-show有更高的初始渲染开销。
           如果需要非常频繁地切换，则使用v-show
           如果在运行时条件很少改变，则使用v-if
      
-->

  <div id="app">
    <p v-if="awesome">Vue is awesome!</p>
    <p v-else>Oh no</p>

    <hr>
    <p v-show="awesome">Vue is awesome!</p>
    <p v-show="!awesome">Oh no</p>

    <button @click="awesome=!awesome">切换</button>
  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        awesome: true
      }
    })
  </script>
</body>

</html>